<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="app">
        <p id="p1"></p>
        <button @click="this.p1++">点击数字相加</button>
        <button onclick="a++">点击数字相加</button>
    </div>
    <script>
        var a = 10;
        document.querySelector('#p1').innerHTML = a;
        // data:变量或者属性的容器 数据集合
        // 在data里面声明的变量具备双向数据绑定，也就是视图或者模型，一者发生改变，另一者随之改变
        document.querySelector('button').onclick = function() {
            a++;
            document.querySelector('#p1').innerHTML = a;
        }
        var b = {
            num: 10,
            add: function() {
                this.num++;
                document.querySelector('#p1').innerHTML = this.num;
            }
        }
        document.querySelector('button[onclick="b.add()"]').onclick = b.add;
    </script>
</body>
</html>